<page-header></page-header>
<nz-card [nzTitle]="phActionTpl">

    <ng-template #phActionTpl>

        <nz-button-group>
            <button (click)="add()"
                    acl acl-ability="user-add"
                    nz-button
                    nzType="primary"><i nz-icon
                                        type="plus"></i> 添加用户
            </button>
            <button (click)="export()" acl acl-ability="user-export"
                    nz-button>
                <i nz-icon
                   nzType="download"></i>导出
            </button>
        </nz-button-group>
        <nz-dropdown *ngIf="selectedRows.length > 0"
                     class="mx-sm">
            <button nz-button
                    nz-dropdown>批量操作<i nz-icon
                                       nzType="ellipsis"></i></button>
            <ul nz-menu>
                <li (click)="deleteMany(selectedRows)"
                    acl acl-ability="user-del"
                    nz-menu-item><i nz-icon
                                                          nzType="delete"></i>删除
                </li>
                <li acl acl-ability="user-disable" nz-menu-item><i nz-icon
                                                                   nzType="delete"></i>禁用
                </li>
                <li acl acl-ability="user-enable" nz-menu-item><i nz-icon
                                                                  nzType="delete"></i>启用
                </li>
            </ul>
        </nz-dropdown>
    </ng-template>

    <!--    <ng-template #search>-->
    <!--        <sf #sf-->
    <!--            mode="search"-->
    <!--            [schema]="searchSchema"-->
    <!--            (formSubmit)="st.reset($event)"-->
    <!--            (formReset)="st.reset($event)"></sf>-->
    <!--    </ng-template>-->
    <sf #sf
        (formReset)="st.reset($event)"
        (formSubmit)="st.reset($event)"
        [schema]="searchSchema"
        mode="search"></sf>
    <st #st
        (change)="onChanged($event)"
        [bordered]="true"
        [columns]="columns"
        [data]="url"
        [header]="alert">
        <ng-template #avatar
                     let-column="column"
                     let-index="index"
                     let-item
                     st-row="custom">
            <nz-avatar [nzIcon]="'user'"
                       [nzShape]="'square'" [nzSrc]="item.imageUrl"></nz-avatar>
        </ng-template>
        <ng-template #alert>
            <nz-alert [nzMessage]="message"
                      [nzShowIcon]="true"
                      [nzType]="'info'">
                <ng-template #message>已选择 <strong class="text-primary">{{ selectedRows.length }}项</strong>
                    <a (click)="st.clearCheck()"
                       *ngIf="selectedRows.length > 0"
                       class="ml-lg">清空</a>
                </ng-template>
            </nz-alert>
        </ng-template>
    </st>
</nz-card>
